<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            width: 500px;
            border: 1px solid #ccc;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }

        thead tr th {
            padding: 0 20px;
            height: 38px;
            border: 1px solid #333;
            background-color: #ccc;
        }

        tbody tr td {
            padding: 0 20px;
            border: 1px solid #333;
            height: 38px;
            line-height: 38px;
        }

        tbody tr td a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
        <script>
            var datas = [{
                name: '蒋振东',
                subject: 'JavaScript',
                score: 100
            }, {
                name: '何苏州',
                subject: 'JavaScript',
                score: 90
            }, {
                name: '罗振林',
                subject: 'JavaScript',
                score: 89
            }, {
                name: '袁华',
                subject: 'JavaScript',
                score: 97
            }, {
                name: '田建河',
                subject: 'JavaScript',
                score: 80
            }]
           var tbody = document.querySelector('tbody');
           for(var i = 0; i < datas.length; i++) {
               console.log(datas[i]);
               //1.创建行tr
               var tr = document.createElement('tr');
               tbody.appendChild(tr);

               //2.创建列td和填充数据
               for(var k in datas[i]){
                   console.log(k);
                   var td = document.createElement('td');
                   td.innerHTML = datas[i][k];
                   tr.appendChild(td);
               }

               //3.创建删除按钮
               var td = document.createElement('td');
               td.innerHTML = '<a href = "javascript">删除</a>'
               tr.appendChild(td);
           }

           //4.创建删除的点击事件
           var as = document.querySelectorAll('a');
           console.log(as.length);
           for(var i = 0; i < as.length; i++) {
               as[i].onclick = function() {
                   tbody.removeChild(this.parentNode.parentNode);
               }
           }
        </script>
    </table>
</body>

</html>